Skip to content

refactor(router-core): Reduce navigation work by making some properties non-reactive #4916

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 14 commits into from
Aug 11, 2025
Merged

refactor(router-core): Reduce navigation work by making some properties non-reactive #4916

merged 14 commits into from
Aug 11, 2025

Conversation

Sheraff
Copy link
Contributor

@Sheraff Sheraff commented Aug 11, 2025 •
edited
Loading

Some of the properties of a route match in the store do not need to be reactive (i.e. reactive = trigger the execution of all subscribers when they change).

This PR proposes we add a _nonReactive key for storing these properties.

Changes to properties in _nonReactive can be made like on a regular object, without the need to call __store.setState, and without making a shallow copy of the object.

The following properties were moved to _nonReactive (but more would be welcome if we can find which ones):

  • beforeLoadPromise
  • loaderPromise
  • pendingTimeout
  • loadPromise
  • displayPendingPromise
  • minPendingPromise
  • dehydrated

This results in the removal of 4 updateMatch calls in router-core. At least 1 of which is in the hot-path of a navigation (loadMatches > validResolvedMatches.forEach). And the removal of 2 updateMatch calls in packages/react-router/src/Match.tsx (and solid-router too).

The ssr property was also updated to not be reactive, but kept outside of _nonReactive because it is part of the public API. This removes another call to updateMatch. This key is an exception, and if in the future we find a need to have more "public but non-reactive" properties, we could consider

  • hiding internal props in a separate type, or
  • adding a dev proxy to ensure non-reactive props aren't accessed inside select functions

This PR adds a unit-test in react-router that counts how many times the select inside a useRouterState hook is called during a navigation. Without this PR, the result of this test is 26 calls. With this PR, we're down to 19 calls.

Should be a partial improvement of #4359

@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Aug 11, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit fbdc46a

Command Status Duration Result
nx affected --targets=test:eslint,test:unit,tes... ✅ Succeeded 1m 47s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 3s View ↗

☁️ Nx Cloud last updated this comment at 2025-08-11 11:37:38 UTC

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Aug 11, 2025 •
edited
Loading

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@4916

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@4916

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@4916

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@4916

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@4916

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@4916

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@4916

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@4916

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@4916

@tanstack/react-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-plugin@4916

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@4916

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@4916

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@4916

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@4916

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@4916

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@4916

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@4916

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@4916

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@4916

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@4916

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@4916

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@4916

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@4916

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@4916

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@4916

@tanstack/solid-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-plugin@4916

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@4916

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@4916

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@4916

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@4916

@tanstack/start-server-functions-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-client@4916

@tanstack/start-server-functions-fetcher

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-fetcher@4916

@tanstack/start-server-functions-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-server@4916

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@4916

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@4916

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@4916

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@4916

commit: fbdc46a

@github-actions github-actions bot added the documentation Everything documentation related label Aug 11, 2025
@Sheraff Sheraff self-assigned this Aug 11, 2025
@Sheraff Sheraff merged commit 916253a into main Aug 11, 2025
5 checks passed
@Sheraff Sheraff deleted the refactor-router-core-non-reactive-store-properties branch August 11, 2025 11:59
This was referenced Aug 11, 2025
Open
Open
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@schiller-manuel schiller-manuel Awaiting requested review from schiller-manuel

Assignees

@Sheraff Sheraff

Labels
documentation Everything documentation related package: react-router package: router-core package: solid-router
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@Sheraff